<template>
  <div id="auth-container">
    <Tabs value="name1">
      <TabPane label="登录" name="name1">
        <div class="login-icon">
          <img  src="../assets/banner/logo.png">
        </div>
        <Form :model="loginForm" class="my-form">
          <FormItem>
            <Input v-model="loginForm.input" placeholder="请输入注册时的用户名"></Input>
          </FormItem>
          <FormItem>
            <Input v-model="loginForm.input" placeholder="请输入密码"></Input>
          </FormItem>
          <Button icon="ios-person" class="my-auth-button">安全登录</Button>
          <p class="forgetPWD">忘记密码？</p>
        </Form>
      </TabPane>
      <TabPane label="注册" name="name2">
        <Form :model="registerForm" class="my-form">
          <FormItem >
            <Input v-model="registerForm.input" placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem>
            <Input v-model="registerForm.input" placeholder="请绑定邮箱"></Input>
          </FormItem>
          <FormItem>
            <Input v-model="registerForm.input" placeholder="密码最小长度六位"></Input>
          </FormItem>
          <FormItem>
            <Input v-model="registerForm.input" placeholder="再次输入密码"></Input>
          </FormItem>
          <Button icon="ios-person" class="my-auth-button">立即注册</Button>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        input: "",
      },
      registerForm: {
        input: "",
      },
    };
  },
};
</script>
<style>
.login-icon{
   margin: 0 auto;
   width: 100px;
   margin-top: 10px;
}
.login-icon img{
  width: 100px;
}
.forgetPWD{
  width: 100%;
  text-align: center;
  margin-top: 35px;
  font-size: 16px;
}
.my-form {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
.my-auth-button {
  width: 100%;
  margin: 0 auto;
  height: 40px;
  background-color: #34495e;
  color: white;
}
.ivu-form .ivu-form-item-label {
  font-size: 14px;
  line-height: 1.5;
}
.ivu-input {
  height: 40px;
}
#auth-container {
  padding: 10px;
}
.ivu-tabs-tab-active {
  font-size: 16px;
}
.ivu-tabs-nav-scroll {
  text-align: center;
}
.ivu-tabs-nav {
  width: 100%;
  margin: 0 auto;
  height: 50px;
}
.ivu-tabs-ink-bar {
  height: 2px;
  left: 20%;
}
.ivu-tabs-tab {
  font-weight: bold;
  font-size: 16px;
}
.ivu-tabs{
  height: auto;
}
</style>